<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>装备器材</title>
    <!-- jquery -->
    <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
    <!-- bootstrap -->
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/bootstrap.min.css}"/>
    <script type="text/javascript" th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/sockjs.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/stomp.min.js}"></script>
    <!--<script src="https://cdn.bootcss.com/sockjs-client/1.4.0/sockjs.min.js"></script>
    <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>-->
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <script th:src="@{/layui/layui.all.js}" charset="utf-8"></script>
</head>

<body>
<h1>装备器材</h1>
<div>
    <div class="layui-col-md10">
        <div class="layui-card">
            <div class="layui-card-header">
                <button type="button" class="layui-btn layui-btn-danger" id="test7"><i class="layui-icon"></i>上传Excel
                </button>
            </div>
            <div class="layui-card-body" id="msg" style="max-height: 300px;height:300px;overflow:auto">
            </div>
        </div>
    </div>
</div>

</body>
<script>
    var stompClient = null;//定义全局变量，代表一个session
    layui.use(['upload', 'element', 'layer'], function () {
        var $ = layui.jquery
            , upload = layui.upload
            , element = layui.element
            , layer = layui.layer;

        connect();
        //设定文件大小限制
        upload.render({
            elem: '#test7'
            , url: '/importOfEquipment' //此处配置你自己的上传接口即可
            , size: 102400 //限制文件大小，单位 KB
            , accept: 'file' //普通文件
            , exts: 'xls|xlsx' //只允许上传压缩文件
            , done: function (res) {
                //layer.msg('上传成功');
                console.log(res);
                $("#msg").empty();
                $("#msg").append($('<div style="color:red"></div>').text(res.msg));
            }
        });
    });

    function connect() {	//定义连接函数
        if (stompClient == null || !stompClient.connected) {
            var url = 'http://127.0.0.1:8080/websocket';
            //var url = '/websocket';//或是这个简写也可以
            var headers = {
                "Authorization": "Bearer xxxxxxxxxxxxxxxxx"
            };
            var sockJS = new SockJS(url);
            stompClient = Stomp.over(sockJS);
            stompClient.heartbeat.outgoing = 20000; //若使用STOMP 1.1 版本，默认开启了心跳检测机制（默认值都是10000ms）
            stompClient.heartbeat.incoming = 0; //客户端不从服务端接收心跳包
            console.log("当前处于断开状态,尝试连接");
            stompClient.connect(headers, connectCallback, errorCallback);
        } else {
            console.log("当前处于连接状态");
        }
    }

    function connectCallback(frame) {  //连接成功时的回调函数
        stompClient.subscribe("/topic/ws", function (result) {
            console.log(result);
            $("#msg").children(':first-child').before($('<div></div>').text(result.body));
        });
    }

    function errorCallback() {//连接失败时的回调函数，此函数重新调用连接方法，形成循环，直到连接成功
        connect();
    }
</script>
</html>